<template>
    <view class="coupon_goods_page">
        <view class="content-list">
            <view v-if="Data.list.length" class="goods-list">
                <view>
                    <view
                        v-for="(item, index) in Data.leftData"
                        :key="index"
                        @click="goToGoodDetail(item)"
                        class="goods-item">
                        <view class="zw-empty">
                            <image :src="item.materialSrc[0]?.materialSrc" class="img" />
                            <GoodsImgStatus v-if="item.onSale == 3" />
                        </view>
                        <view class="title">{{ item.goodsName }}</view>
                        <view class="goods-item-bottom">
                            <view class="bottom-left">
                                <text>￥</text>
                                <text class="price">{{ priceNum(item.goodsMinPrice, 0) }}</text>
                                <text v-if="priceNum(item.goodsMinPrice, 1)"
                                    >.{{ priceNum(item.goodsMinPrice, 1) }}
                                </text>
                                <text class="price-qi" v-if="item.goodsMinPrice != item.goodsMaxPrice"> 起 </text>
                            </view>
                            <view @click.stop="e => jumpCart(item, e)">
                                <image
                                    v-if="item.goodsStock > 0 && item.onSale == 1"
                                    class="bottom-right"
                                    :src="getImgOssUrl('/ui-prod-2.0.0/icon_img01.png')"
                                    alt="" />
                                <image
                                    v-else
                                    class="bottom-right"
                                    :src="getImgOssUrl('/ui-prod-2.0.0/icon_img01_disabled.png')"
                                    alt="" />
                            </view>
                        </view>
                    </view>
                </view>
                <view>
                    <view
                        v-for="(item, index) in Data.rightData"
                        :key="index"
                        @click="goToGoodDetail(item)"
                        class="goods-item">
                        <view class="zw-empty">
                            <image :src="item.materialSrc[0]?.materialSrc" class="img" />
                            <GoodsImgStatus v-if="item.onSale == 3" />
                        </view>
                        <view class="title">{{ item.goodsName }}</view>
                        <view class="goods-item-bottom">
                            <view class="bottom-left">
                                <text>￥</text>
                                <text class="price">{{ priceNum(item.goodsMinPrice, 0) }}</text>
                                <text v-if="priceNum(item.goodsMinPrice, 1)"
                                    >.{{ priceNum(item.goodsMinPrice, 1) }}
                                </text>
                                <text class="price-qi" v-if="item.goodsMinPrice != item.goodsMaxPrice"> 起 </text>
                            </view>
                            <view @click.stop="e => jumpCart(item, e)">
                                <image
                                    v-if="item.goodsStock > 0 && item.onSale == 1"
                                    class="bottom-right"
                                    :src="getImgOssUrl('/ui-prod-2.0.0/icon_img01.png')"
                                    alt="" />
                                <image
                                    v-else
                                    class="bottom-right"
                                    :src="getImgOssUrl('/ui-prod-2.0.0/icon_img01_disabled.png')"
                                    alt="" />
                            </view>
                        </view>
                    </view>
                </view>
                <view class="list-loading">
                    {{
                        isBottom && Data.list.length
                            ? listLoading
                                ? '加载中…'
                                : Data.list.length <= Data.totalCount
                                ? ''
                                : '已经到底啦！'
                            : ''
                    }}
                </view>
            </view>
            <view v-else class="no-data">
                <img class="empty" :src="getImgOssUrl('/ui-prod-2.3.0/empty-addr@2x.png')" />
                暂无数据
            </view>
        </view>
        <uni-popup ref="popup" :safe-area="false" @change="change">
            <view class="popup-content">
                <view class="pop_cancel" @click.stop="cancel">
                    <img class="pop_logo" :src="getImgOssUrl('/ui-prod-2.0.0/cancel_1.1.png')" />
                </view>
                <skupop
                    :type="Data.type"
                    :goodsId="goodsData.goodsId"
                    :goodsNo="goodsData.goodsNo"
                    :show="goodsData.show"
                    @popup="popup.open('bottom')"
                    @close="close"
                    @buyGoods="toConfirm" />
            </view>
        </uni-popup>
        <Loading />
    </view>
</template>
<script setup>
import Loading from '@/components/el-loading';
import skupop from '@/components/skupop';
import CouponDetail from '@/components/coupon/detail.vue';
import { getImgOssUrl, floatDivide, checkToken } from '@/commons/utils';
import { ref, reactive, onMounted, computed } from 'vue';
import { onReachBottom, onPageScroll } from '@dcloudio/uni-app';
import router from '@/router';
import request from '@/request';
import GoodsImgStatus from '@/components/goodsImgStatus';

const props = defineProps({
    couponId: {
        type: [String, Number],
        default: ''
    }
});
const goodsData = reactive({ goodsId: '', goodsNo: '', show: false, activityId: '', activityStatus: '' });
const Data = reactive({
    list: [],
    leftData: [],
    rightData: [],
    type: 1
});
const para = reactive({
    perPage: 10,
    page: 1
});
const goToGoodDetail = item => {
    router.push({
        path: '/pages-cart/good/index',
        query: {
            goodsId: item.id
        }
    });
};

const jumpCart = async (val, e) => {
    if (e.type !== 'tap') return;
    if (!(await checkToken())) {
        router.push('/pages-user/login/index');
        return;
    }
    if (val.goodsStock < 1 || ['3', '2'].includes(val.onSale)) return;
    goodsData.goodsNo = val.goodsNo;
    goodsData.goodsId = val.id;
    goodsData.show = true;
};
const change = type => {
    goodsData.show = type.show;
};
const popup = ref();
const close = param => {
    popup.value.close();
    goodsData.show = false;
};
const cancel = () => {
    popup.value.close();
    goodsData.show = false;
};
const toConfirm = val => {
    let { quantity, skuId, goodsId } = val;
    let query = { skuList: JSON.stringify([{ goodsId, quantity, skuId }]) };
    router.push({
        path: '/pages-cart/confirm/index',
        query
    });
};

const priceNum = (amount, index) => {
    let price = floatDivide(amount, 100);
    let list = [];
    try {
        list = price.toString().split('.');
    } catch (e) {
        list = [Number(price)];
    }
    return list[index];
};

let listLoading = ref(false);
const queryData = async () => {
    listLoading.value = true;
    const { data } = await request(
        'queryCouponGoodsListServ',
        Object.assign(
            {
                couponId: props.couponId
            },
            para
        )
    );
    Data.list = Data.list.concat(data.list || []);
    data?.list?.forEach((item, index) => {
        if ((index + 1) % 2) {
            Data.leftData = [...Data.leftData, item];
        } else {
            Data.rightData = [...Data.rightData, item];
        }
    });
    listLoading.value = false;
    Data.totalCount = data?.totalCount;
};

const isBottom = computed(() => {
    return Data.scrollTop > 50;
});
onPageScroll(e => {
    Data.scrollTop = e.scrollTop;
});

// 上拉加载
onReachBottom(() => {
    if (Data.totalCount > Data.list.length) {
        para.page++;
        queryData();
    }
});

onMounted(() => {
    queryData();
});
</script>
<style lang="scss" src="./style.scss" scoped></style>
